<template>
	<div>
		<el-row>
			<!--<el-col :span="24" class="head">{{ userlogin.className }}</el-col>-->
			<el-col :span="24" class="banner">
			<el-dropdown @command="handleCommand" class="selectClass">
				<span class="el-dropdown-link">
    <span>班级：</span>{{ classname }}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item v-for="x in userlogin.classList" :command="x">{{ x.classname }}</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
				<button  class="fr banbutton" @click="refreshGroup()">重置</button>
				<button  class="fr banbutton" @click="saveGroup()">保存</button>
			</el-col>
			<el-col :span="12" class="content left" v-if='classid'>
				<p><i class="iconfont icon-minus-fill"></i>点击学生姓名，将学生从小组移除</p>
				<!--遍历学生分组的数据，进行展示-->
				<div v-for="(x, index) in groupedStu" class="groupbox" @click="chooseGroup(index)" :class="{active:active==index}">
					<el-col :span="2" class="groupNumber" onselectstart="return false;">
						{{ index+1 }}组
					</el-col>
					<el-col :span="22" class="stubox">
						<div>
							<!--再遍历每组学生的名单进行展示-->
							<span v-for="(item,index) in x.groupData" :title="item.name" class="stuname" @click="cancelStu(item,index,x,$event)" onselectstart="return false;">
							{{ item.name }}
						</span>

						</div>
					</el-col>
				</div>
				<div class="createGroup" @click="createGroup()" v-if="groupedStu.length<4">添加小组</div>
			</el-col>
			<el-col :span="12" class="content" v-if='classid'>
				<p><i class="iconfont icon-jia"></i>点击学生姓名，将学生添加到小组</p>
				<!--遍历所有学生数据，进行展示-->
				<ul>
					<li v-for="(item,index) in groupingStu" class="stuname" @click="chooseStu(item,index)" onselectstart="return false;">
						{{ item.name }}
					</li>
				</ul>
			</el-col>
			<el-col :span="24" class="content noClass" v-if='!classid'>
				请选择班级
			</el-col>
			<div class="totast" v-show="showTotast">{{ totastMsg }}</div>
		</el-row>
	</div>
</template>

<script>
	import api from '../api';
	import axios from 'axios';
	import { API_ROOT } from '../util/config'
	import { getStore, setStore } from '../util/util'
	import { mapState, mapMutations } from 'vuex'
	import $ from 'jquery'
	export default {
		data() {
			return {
				showTotast:false,
				active: -1,
				groupedStu: [],
				groupingStu: [],
				groupName: ['A', 'B', 'C', 'D'],
				isGrouped: 0,
				totastMsg:'',
				classname:'选择班级',
				classid:''
			}
		},
		created() {
			console.log(document.getElementsByClassName('totast'))
			this.INIT_STATE()
			if(this.userlogin.classList.length==1){
				this.classid=this.userlogin.classList[0].classid
				this.getGroupResult();
			}
			if(getStore('classGroup')){
				console.log(getStore('classGroup'))
				this.classname=getStore('classGroup').classname
				this.classid=getStore('classGroup').classid
				this.getGroupResult();
			}
		},
		computed:{
			...mapState(["userlogin"])
		},
		methods: {
			...mapMutations(["INIT_STATE"]),
			getGroupResult() {
				var that = this
				//获取分组的学生
				api.getGroupResult({
						teacherid: this.userlogin.id,
						classid: this.classid
				}).then(function(out) {
					if(out.data.data.groupList.length > 0) {
						that.isGrouped = 1;
					}					
					that.groupedStu = out.data.data.groupList;
					that.groupingStu = out.data.data.stuMapList;
					var lineNum=Math.ceil(out.data.data.studentNum/5)
					$(".content.left").css('height',lineNum*80+61+'px')
				})
			},
			handleCommand(x) {
				this.classname = x.classname;
				this.classid = x.classid;
				setStore('classGroup',x)
				this.getGroupResult();
			},
			chooseGroup(index) {
				this.active = index
			},
			cancelStu(item, index, arr, event) {
				event.stopPropagation();
				this.groupingStu.push(item);
				arr.groupData.splice(index, 1);
			},
			chooseStu(item, index) {
				if(this.active == -1) {
//					this.$message.error('请选择一个分组')
					this.showTip('请选择一个分组')
				} else {
					this.groupedStu[this.active].groupData.push(item);
					this.groupingStu.splice(index, 1)
					$('.stubox').eq(this.active).scrollTop(Math.ceil(this.groupedStu.length/4)*49)
				}
			},
			createGroup() {
				this.groupedStu.push({
					groupData: [],
					groupName: this.groupName[this.groupedStu.length]
				})
			},
			saveGroup() {
				if(this.groupedStu.length == 0) {
					this.showTip('尚未分组')
//					this.$message.error('尚未分组')
					return false;
				}
				//获取分组信息
				var data = '';
				var groupedLength = this.groupedStu.length;
				this.groupedStu.forEach(function(v, i) {
					data += (v.groupName + ':');
					v.groupData.forEach(function(item, index) {
						data += item.studentid
						if(index < v.groupData.length - 1) {
							data += ','
						}
					})
					if(i < groupedLength - 1) {
						data += ';'
					}
				})
				var that = this;
				//保存分组的学生
				api.saveGroupResult({
						teacherid: this.userlogin.id,
						classid: this.classid,
						schoolid: this.userlogin.schoolid,
						data: data
				}).then(function(out) {
					that.active = -1
					that.$message.success('保存成功')
				})
			},
			refreshGroup() {
				var that = this;
				if(this.isGrouped == 1) {
					//重置分组
					api.emptyGroupResult( {
							teacherid: this.userlogin.id,
							classid: this.classid
					}).then(function(out) {
						that.active = -1
						that.$message.success('重置成功')
						that.groupedStu = [];
						that.isGrouped = 0;
						that.getGroupResult()

					})
				} else {
					that.getGroupResult()
				}
			},
			showTip(msg){				
					var that=this;
					this.totastMsg=msg;
					this.showTotast=true;
					setTimeout(function(){
						document.getElementsByClassName('totast')[0].style.backgroundColor='rgba(0,0,0,0)'
						setTimeout(function(){
							that.showTotast=false	
							document.getElementsByClassName('totast')[0].style.backgroundColor='rgba(0,0,0,0.5)'
						},800)
					},1000)
			}
		}
	}
</script>

<style scoped>
	.selectClass{
		cursor: default;
	}
	.wrongToast{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;		
	}
	.fr {
		float: right;
	}
	
	.right {
		padding-left: 13px;
		padding-right: 13px;
	}
	
	.head {
		text-align: center;
	}
	
	.banner {
		padding-left: 30px;
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		background: #F5FAFC;
	}
	
	.banbutton {
		float: right;
		margin-top: 9px;
		width: 80px;
		padding: 0;
		height: 30px;
		margin-right: 20px;
		color: white;
		background-color: #FFAA60;
		outline: none;
		border: none;
	}
	.banbutton:nth-of-type(1){
		background-color: #14ACF4;
	}
	i.icon-minus-fill{
		color: #FFAA60;
		margin-right: 8px;
	}
	i.icon-jia{
		color: #14ACF4;
		margin-right: 8px;
	}
	.content>p {
		margin-top: 40px;
		text-align: center;
		font-family: STHeitiSC-Medium;
		font-size: 16px;
		color: #4A4A4A;
		letter-spacing: 0;
	}
	
	.el-dropdown-link>span{
		font-weight: bold;
		font-size: 16px;
		color: black;
	}
	.groupbox {
		width: 378px;
		height: 120px;
		background: #FFFFFF;
		margin-top: 20px;
		margin-left: 61px;
	}
	
	.groupbox.active {
		
		box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.20);
	}
	
	.groupbox>.groupNumber {
		text-align: center;
		background-image: linear-gradient(46deg, #4A71E1 0%, #3CEAFF 100%);
		color: white;
		line-height: 40px;
		padding-top: 15px;
		letter-spacing: 4px;
		font-weight: bold;
		height: 100%;
	}
	
	.groupbox>.stubox {
		height: 100%;
		overflow-y: scroll;
	}
	
	.groupbox>.stubox>div {
		padding-left: 10px;
		padding-bottom: 10px;
	}
	.groupbox>.stubox>div>span:hover{
		color:#14ACF4;
		cursor: pointer;
	}
	
	.groupbox .stuname {
		display: inline-block;
		margin: 10px 10px;
		cursor: default;
		font-size: 14px;
		overflow: hidden;
		text-align: center;
		width: 45px;
		height: 20px;
		
	}
	.content.left{
		background: url(../assets/images/groupBg.png);
		background-position-y: -162px;
		min-height: 649px;
		
	}
	.noClass{
		background: url(../assets/images/groupBg.png);
		text-align: center;
		background-size: contain;
		line-height: 270px;
		min-height: 649px;
		letter-spacing: 2px;
	}
	.content>.createGroup {
		background-image: linear-gradient(46deg, #3CEAFF 0%, #4A71E1 100%);
		box-shadow: 0 2px 4px 2px rgba(60, 234, 255, 0.5);
		font-family: STHeitiSC-Medium;
		font-size: 14px;
		color: #FFFFFF;
		letter-spacing: 0;
		width: 180px;
		height: 36px;
		border-radius: 22px;
		margin: 20px auto;
		text-align: center;
		line-height: 36px;
		cursor: default;
	}
	.content>.createGroup:hover{
		cursor: pointer;
		background-image: linear-gradient(46deg, rgba(60,234,255,0.8) 0%, rgba(71,113,225,0.8) 100%);
	}
	.content>ul{
		margin-left: 40px;
	}
	.content>ul>li {
		width: 60px;
		height: 60px;
		background: #FFFFFF;
		box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.10);
		border-radius: 100px;
		font-family: STHeitiSC-Medium;
		overflow: hidden;
		font-size: 14px;
		color: #4A4A4A;
		letter-spacing: 0;
		display: inline-block;
		text-align: center;
		line-height: 60px;
		margin-right: 30px;
		margin-top: 20px;
		cursor: default;
	}
	.content>ul>li:hover{
		background-color: rgba(20,172,244,0.1);
		cursor: pointer;
	}
</style>